<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成 TabBar 图标</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .icon-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;
        }
        .icon-card h3 {
            margin-top: 0;
            color: #7C4DFF;
        }
        canvas {
            border: 1px solid #ddd;
            margin: 10px 0;
            border-radius: 4px;
        }
        button {
            background: #7C4DFF;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        button:hover {
            background: #6A3FE8;
        }
        .download-all {
            text-align: center;
            margin: 30px 0;
        }
        .download-all button {
            font-size: 16px;
            padding: 12px 30px;
        }
        .instructions {
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>🎵 TabBar 图标生成器</h1>
    
    <div class="instructions">
        <strong>使用说明：</strong>
        <ol>
            <li>点击下方的"下载"按钮，下载每个图标的普通和激活状态</li>
            <li>将下载的图标文件放入项目的 <code>static/tabbar/</code> 目录</li>
            <li>重新编译项目即可看到效果</li>
        </ol>
    </div>

    <div class="download-all">
        <button onclick="downloadAll()">📦 下载全部图标</button>
    </div>

    <div class="container" id="iconContainer"></div>

    <script>
        const icons = [
            {
                name: 'recommend',
                title: '推荐',
                draw: (ctx, color, size) => {
                    // 星星图标
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    const cx = size / 2;
                    const cy = size / 2;
                    const spikes = 5;
                    const outerRadius = size * 0.35;
                    const innerRadius = size * 0.15;
                    
                    for (let i = 0; i < spikes * 2; i++) {
                        const radius = i % 2 === 0 ? outerRadius : innerRadius;
                        const angle = (i * Math.PI) / spikes - Math.PI / 2;
                        const x = cx + Math.cos(angle) * radius;
                        const y = cy + Math.sin(angle) * radius;
                        if (i === 0) ctx.moveTo(x, y);
                        else ctx.lineTo(x, y);
                    }
                    ctx.closePath();
                    ctx.fill();
                }
            },
            {
                name: 'favorite',
                title: '我的喜欢',
                draw: (ctx, color, size) => {
                    // 爱心图标
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    const cx = size / 2;
                    const cy = size / 2;
                    const width = size * 0.6;
                    const height = size * 0.6;
                    const topCurveHeight = height * 0.3;
                    
                    ctx.moveTo(cx, cy + height / 4);
                    ctx.bezierCurveTo(
                        cx, cy,
                        cx - width / 2, cy - topCurveHeight,
                        cx - width / 2, cy + topCurveHeight / 2
                    );
                    ctx.bezierCurveTo(
                        cx - width / 2, cy + (height + topCurveHeight) / 2,
                        cx, cy + (height + topCurveHeight) / 1.2,
                        cx, cy + height / 4
                    );
                    ctx.bezierCurveTo(
                        cx, cy + (height + topCurveHeight) / 1.2,
                        cx + width / 2, cy + (height + topCurveHeight) / 2,
                        cx + width / 2, cy + topCurveHeight / 2
                    );
                    ctx.bezierCurveTo(
                        cx + width / 2, cy - topCurveHeight,
                        cx, cy,
                        cx, cy + height / 4
                    );
                    ctx.closePath();
                    ctx.fill();
                }
            },
            {
                name: 'history',
                title: '历史记录',
                draw: (ctx, color, size) => {
                    // 时钟图标
                    const cx = size / 2;
                    const cy = size / 2;
                    const radius = size * 0.35;
                    
                    // 圆圈
                    ctx.strokeStyle = color;
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.arc(cx, cy, radius, 0, Math.PI * 2);
                    ctx.stroke();
                    
                    // 时针
                    ctx.beginPath();
                    ctx.moveTo(cx, cy);
                    ctx.lineTo(cx, cy - radius * 0.6);
                    ctx.stroke();
                    
                    // 分针
                    ctx.beginPath();
                    ctx.moveTo(cx, cy);
                    ctx.lineTo(cx + radius * 0.5, cy + radius * 0.3);
                    ctx.stroke();
                }
            },
            {
                name: 'user',
                title: '我的',
                draw: (ctx, color, size) => {
                    // 用户图标
                    const cx = size / 2;
                    const cy = size / 2;
                    
                    // 头部
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    ctx.arc(cx, cy - size * 0.1, size * 0.15, 0, Math.PI * 2);
                    ctx.fill();
                    
                    // 身体
                    ctx.strokeStyle = color;
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.arc(cx, cy + size * 0.25, size * 0.25, Math.PI, 0, true);
                    ctx.stroke();
                }
            }
        ];

        const colors = {
            normal: '#888888',
            active: '#7C4DFF'
        };

        function createCanvas(icon, state) {
            const canvas = document.createElement('canvas');
            const size = 81;
            canvas.width = size;
            canvas.height = size;
            const ctx = canvas.getContext('2d');
            
            // 绘制图标
            icon.draw(ctx, colors[state], size);
            
            return canvas;
        }

        function downloadCanvas(canvas, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        function createIconCard(icon) {
            const card = document.createElement('div');
            card.className = 'icon-card';
            
            const title = document.createElement('h3');
            title.textContent = icon.title;
            card.appendChild(title);
            
            // 普通状态
            const normalLabel = document.createElement('p');
            normalLabel.textContent = '普通状态';
            normalLabel.style.margin = '10px 0 5px 0';
            normalLabel.style.fontSize = '12px';
            normalLabel.style.color = '#666';
            card.appendChild(normalLabel);
            
            const normalCanvas = createCanvas(icon, 'normal');
            card.appendChild(normalCanvas);
            
            const normalBtn = document.createElement('button');
            normalBtn.textContent = '下载';
            normalBtn.onclick = () => downloadCanvas(normalCanvas, `${icon.name}.png`);
            card.appendChild(normalBtn);
            
            // 激活状态
            const activeLabel = document.createElement('p');
            activeLabel.textContent = '激活状态';
            activeLabel.style.margin = '10px 0 5px 0';
            activeLabel.style.fontSize = '12px';
            activeLabel.style.color = '#666';
            card.appendChild(activeLabel);
            
            const activeCanvas = createCanvas(icon, 'active');
            card.appendChild(activeCanvas);
            
            const activeBtn = document.createElement('button');
            activeBtn.textContent = '下载';
            activeBtn.onclick = () => downloadCanvas(activeCanvas, `${icon.name}-active.png`);
            card.appendChild(activeBtn);
            
            return card;
        }

        function downloadAll() {
            icons.forEach(icon => {
                const normalCanvas = createCanvas(icon, 'normal');
                const activeCanvas = createCanvas(icon, 'active');
                
                setTimeout(() => {
                    downloadCanvas(normalCanvas, `${icon.name}.png`);
                }, 100);
                
                setTimeout(() => {
                    downloadCanvas(activeCanvas, `${icon.name}-active.png`);
                }, 200);
            });
            
            alert('开始下载所有图标！请在浏览器下载文件夹中查看。');
        }

        // 初始化
        const container = document.getElementById('iconContainer');
        icons.forEach(icon => {
            container.appendChild(createIconCard(icon));
        });
    </script>
</body>
</html>
